import React, { Component, PropTypes } from 'react'

export default class RowLineText extends Component {
  constructor() {
    super()
    this.renderSpan = this.renderSpan.bind(this)
    this.state = {
      activeIndex: 0,
    }
  }
  render() {
    const { lft, rgt } = this.props
    const { active } = this.state
    return (
      <div className={`cm-row-text`}>
        {[lft, rgt].map(this.renderSpan)}
      </div>
    )
  }
  renderSpan(v, index) {
    const { onChange } = this.props
    const { activeIndex } = this.state
    const bool = (activeIndex === index)
    return (
      <span
        key={v}
        className={`${bool ? 'cm-active-title' : ''}`}
        onClick={() => {
          if (bool) return
          this.setState({
            activeIndex: index,
          }, () => {
            onChange(index)
          })
        }}
      >
        {v}
      </span>
    )
  }
}

RowLineText.propTypes = {
  lft: PropTypes.string.isRequired,
  rgt: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
}